<template>
	<uv-popup ref="popup" mode="center" :round="10">
		<view class="answer-card-popup">
			<view class="answer-card-header">
				<text class="answer-card-title">答题卡</text>
				<view class="answer-card-stats">
					<text>已答: {{ answeredCount }}/{{ questions.length }}</text>
					<!-- <text>正确: {{ correctCount }}</text> -->
				</view>
			</view>
			<scroll-view scroll-y class="answer-card-content">
				<view class="answer-card-grid">
					<view 
						v-for="(question, index) in questions" 
						:key="index"
						class="answer-card-item"
						:class="{
							'answer-card-item-current': currentIndex === index,
							'answer-card-item-answered': question.userAnswer,
							'answer-card-item-correct': isAnswerCorrect(question) && showAnswer,
							'answer-card-item-wrong': question.userAnswer && !isAnswerCorrect(question) && showAnswer
						}"
						@click="selectQuestion(index)"
					>
						<text>{{ index + 1 }}</text>
						<text v-if="question.userAnswer" class="answer-card-item-value">{{ question.userAnswer.answerContent }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="answer-card-footer">
				<view class="answer-card-legend">
					<view class="legend-item">
						<view class="legend-color legend-current"></view>
						<text>当前题</text>
					</view>
					<view class="legend-item">
						<view class="legend-color legend-answered"></view>
						<text>已答</text>
					</view>
					<view class="legend-item" v-if="showAnswer">
						<view class="legend-color legend-correct"></view>
						<text>正确</text>
					</view>
					<view class="legend-item" v-if="showAnswer">
						<view class="legend-color legend-wrong"></view>
						<text>错误</text>
					</view>
				</view>
				<view class="answer-card-btn" @click="close">关闭</view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
import { isAnswerCorrect } from '@/utils/answerValidator';
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		questions: {
			type: Array,
			default: () => []
		},
		currentIndex: {
			type: Number,
			default: 0
		},
        showAnswer: {
            type: Boolean,
            default: false	
        },
	},
	computed: {
		answeredCount() {
			return this.questions.filter(q => q.userAnswer).length;
		},
		correctCount() {
			return this.questions.filter(q => q.userAnswer === q.correctAnswer).length;
		}
	},
	methods: {
        isAnswerCorrect,
        open(){
            this.$refs.popup.open();
            // this.$refs.popup.open('bottom');
        },
		close() {
            this.$refs.popup.close();
		},
		selectQuestion(index) {
			this.$emit('select', index);
			this.close();
		}
	}
}
</script>

<style lang="scss" scoped>
.answer-card-popup {
	width: 600rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.answer-card-header {
	padding: 30rpx;
	border-bottom: 2rpx solid #eee;
	
	.answer-card-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 16rpx;
	}
	
	.answer-card-stats {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
	}
}

.answer-card-content {
	padding: 30rpx;
	max-height: 600rpx;
}

.answer-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.answer-card-item {
	width: 80rpx;
	height: 80rpx;
	border-radius: 8rpx;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #333;
	position: relative;
	border: 2rpx solid transparent;
	
	&-current {
		border-color: #007aff;
		background-color: #e6f2ff;
	}
	
	&-answered {
		background-color: #3c9cff33;
	}
	
	&-correct {
		background-color: #e8f5e9;
		border-color: #4caf50;
	}
	
	&-wrong {
		background-color: #ffebee;
		border-color: #f44336;
	}
	
	&-value {
		position: absolute;
		right: 6rpx;
		bottom: 6rpx;
		font-size: 20rpx;
		color: #666;
	}
}

.answer-card-footer {
	padding: 20rpx 30rpx 30rpx;
	border-top: 2rpx solid #eee;
}

.answer-card-legend {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	
	.legend-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}
	
	.legend-color {
		width: 24rpx;
		height: 24rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
		
		&.legend-current {
			background-color: #e6f2ff;
			border: 2rpx solid #007aff;
		}
		
		&.legend-answered {
			background-color: #f0f0f0;
		}
		
		&.legend-correct {
			background-color: #e8f5e9;
			border: 2rpx solid #4caf50;
		}
		
		&.legend-wrong {
			background-color: #ffebee;
			border: 2rpx solid #f44336;
		}
	}
}

.answer-card-btn {
	height: 80rpx;
	background-color: #007aff;
	color: #fff;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
}
</style>